<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>洞窟</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/media.css"/>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/search.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
<script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>

<style>
			      /* 添加旋转动画效果 */
 

				  .rotating-image {
            transition: transform 0.5s ease-in-out;
            display: block;
        }
	* {
		margin: 0;
		padding: 0;
	}
	

	.one-img-box,
	.big-img-box {
		position: relative;
		width: 400px;
		height: 300px;
		box-shadow: 0 0 6px 1px #cacaca;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 100px;
		
	}

	.one-img-box {
		display: inline-block;
		/* top: 60px;*/
		/* left: 100px; */
		cursor: move;

	}

	.one-img-box>img {
		width: 100%;
		height: 100%;
		
	}

	.big-img-box {
		/* display: inline-block; */
		display: none;
		/* top: 60px; */
		 /* left: 100px;  */
		z-index: 9999;
		
	}

	.big-img-box>img {
		width: 400%;
		height: 300%;
		z-index: 9999;
		
	}

	.big-img {
		position: absolute;
		left: 0;
		top: 0;
		
	}

	.mask {
		/* display: inline-block; */
		display: none;
		position: absolute;
		z-index: 998;
		left: 0;
		top: 0;
		width: 100px;
		height: 100px;
		background-color: yellowgreen;
		opacity: .4;
		
	}
</style>
</head>
<body style="background-color: gainsboro;">
<!--头部-->
<header class="header">
	<div class="top hidden-sm hidden-xs ">
		<div class="container">
			<div class="pull-left">探索敦煌文化，千年文化之旅的起点。</div>
			<div class="pull-right">
				<form action="#" method="get" class="fl">
					<input type="text" placeholder="热门搜索：洞窟" />
					<input class="sou_colour" type="button" value="" onclick="searchAndScroll()" />
										
				</form>
			
			</div>
		</div>
	</div>
		
	<div class="logo_box">
		<div class=" container">
		<div class="logo pull-left">
			<img src="images/logo.png" alt="" height="60"  />
		</div>
		
		<button	class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>

		<div class="nav_box collapse navbar-collapse pull-right">
			<ul class="nav navbar-nav" id="nav_sj">
				<li><a href="index.html">首页</a></li>
				<li><a href="wenchuang.html">文创</a></li>
				<li><a href="exhibition.html">展览</a></li>
				<li><a class="acitve" href="dongku.html">洞窟</a></li>
				<li><a href="bihua.html">壁画</a></li>
				<li><a href="login.html">登录</a></li>
				<li><a href="register.html">注册</a></li>
				<li class="tel"><a href="message.html">留言板</a></li>
			</ul>
		</div>
		</div>
	</div>
</header>

<!-- 轮播图 -->
<section class="banner">
	<div id="container">
		<div id="viewwrap">
			<div id="imgs">
				<a>
					<img src="images/lunbo_2.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_4.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_1.jpg" alt="" class="img-responsive" />
				</a>
				<a>
					<img src="images/lunbo_3.jpg" alt="" class="img-responsive" />
				</a>
			</div>
			<i class="imgicon icon_l"></i>
			<i class="imgicon icon_r"></i>
			<div id="numwrap">
				<i class="num focus" name="0"></i>
				<i class="num" name="1"></i>
				<i class="num" name="2"></i>
				<i class="num" name="3"></i>
			</div>
		</div>
	</div>
</section>

<!--位置导航-->
<div class="mbx">
	<div class="container">
		您的位置：<a href="index.html">首页</a> > <a href="dongku.html">洞窟</a>
	</div>	
</div>
<!--洞窟-->
<div class="cpzx text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="tit2">
					<h1 id="classic-caves"><span>经典洞窟</span></h1>
					
				</div>
			</div>
			<div class="one-img-box">
				<div class="mask"></div>
				<img src="images/big0.jpg" alt="">
				
			</div>
			<div class="big-img-box">
				<img class="big-img" src="images/big0.jpg"  alt="">
					
			</div>
			<div class="cpzx_con row text-center">
				
				<div class="col-md-6 col-sm-6 col-xs-12">
					
					<a href="#">						
						<dl>	
							<dt><img src="images/003.jpg" alt=""></dt>
							<dd>
								<h2>榆林窟第003窟</h2>
								
								<p ><span>时代：西夏</span>
								<span>建于西夏统治瓜州晚期。窟内纷呈汉、藏民族及显宗、密宗的内容和艺术，是这一时期艺术最成熟、最典型的洞窟，独具特...</span>
								</p>
								

							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/57.jpg" /></dt>
							<dd>
								<h2>莫高窟第57窟 </h2>
								<p ><span>时代：初唐</span>
								<span>第五七窟位于莫高窟南区中部，初唐创建，晚唐重修，属于中小型洞窟，是方形覆斗顶殿堂式窟。 主室窟顶藻井画双龙莲花...</span>
								</p>
							</dd>
						</dl>
					</a>
				</div>
				
	        </div>		
			<div class="cpzx_con row text-center">
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/61.jpg" /></dt>
							<dd>
								<h2>莫高窟第061窟</h2>
								
								<p ><span>时代：五代</span>
								<span>归义军节度使曹元忠夫妇于十世纪中期所建的功德窟，宋代重修部分壁画。位于莫高窟南区中段下层，莫高窟大型洞窟之...</span>
								</p>
								
			
							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/57.jpg" /></dt>
							<dd>
								<h2>麦积山石窟127窟 </h2>
								<p ><span>时代：北魏</span>
								<span>平面横长方形帐形顶窟，窟宽8.0米，深4.0米，高4.0米，是西崖三大洞窟之一（另外两个分别是133和135窟）。前壁开门...</span>
								</p>
							</dd>
						</dl>
					</a>
				</div>
				
			</div>	
			<div class="cpzx_con row text-center">
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/254.jpg" /></dt>
							<dd>
								<h2>莫高窟第254窟</h2>
								<p ><span>时代：北魏</span>
								<span>第254窟建于北魏。洞窟位于莫高窟崖面中层，是莫高窟最早的中心塔柱式洞窟。 洞窟前部为人字披顶，人字披南北两端模仿...</span>
								</p>
								
			
							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/285.jpg" /></dt>
							<dd>
								<h2>莫高窟第285窟</h2>
								<p ><span>时代：西魏</span>
								<span>该窟开凿于西魏大统年间（主室北壁发愿文中存有西魏大统四年（538年）、五年（539年记年），是敦煌石窟中最早有确切...</span>
								</p>
							</dd>
						</dl>
					</a>
				</div>
				
			</div>
			<div class="cpzx_con row text-center">
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/322.jpg" /></dt>
							<dd>
								<h2>莫高窟第322窟</h2>
								
								<p ><span>时代：初唐</span>
								<span>莫高窟第322窟建于初唐，五代重修，覆斗形殿堂式小型窟。主室西壁开双层龛，内塑一佛、二弟子、二菩萨、二天王，塑像...</span>
								</p>
								
			
							</dd>
						</dl>
					</a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<a href="#">
						<dl>
							<dt><img src="images/420.jpg" /></dt>
							<dd>
								<h2>莫高窟第420窟 </h2>
								<p ><span>时代：隋朝</span>
								<span>该窟创建于隋，宋、西夏重绘部分壁画，主室为覆斗形顶，南、西、北壁各开一龛，被称为“三龛窟”。主室窟顶为斗四莲花藻..</span>
								</p>
							</dd>
						</dl>
					</a>
				</div>
			</div>
	    </div>
	</div>
</div>


<!--底部-->
<footer class="footer hidden-xs">
    <div class="line_big container text-center">
      <div id="app-1">
        <div class="col-sm-3 col-md-3">
          <div class="service-box">                
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3">
          <div class="service-box">            
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信视频号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3">
          <div class="service-box">            
            <rotating-image image-src="images/footer.jpg"></rotating-image>
            <h4>遇见敦煌微信订阅号</h4>
          </div>
        </div>
        <div class="col-sm-3 col-md-3 ewm">
          <div class="service-box text-left">
            <h3>联系我们</h3>
            <div class="ewm_f">
              <p>电话: 020-38046811</p>
              <p>邮箱: 4679350271@qq.cpm</p>
              <p>网址: www.z-dunhuang.com</p>
              <p>地址: 广东省广州市</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="copy col-md-12">
      <div class="text-center">遇见敦煌版权所有 2024-2025 © Copyright For Dunhuang © www.z-dunhuang.com Tel:(86) 0937-1235488 . 粤ICP备101003344号 </div>
    </div>
  </footer>

 

<!--移动端底部导航-->
<div class="phonefooternav">
    <ul>
        <li>
            <a href="exhibition.html">
               
                <span>展览</span>
            </a>
        </li>
        <li>
            <a href="dongku.html">
             
                <span>洞窟</span>
            </a>
        </li>
        <li>
            <a href="bihua.html">
                
                <span>壁画</span>
            </a>
        </li>
        <li>
            <a href="index.html">
                
                <span>返回首页</span>
            </a>
        </li>
    </ul>
</div>



</body>

<script src="js/fangdajing.js" type="text/javascript" charset="utf-8"></script>
<script src="js/rotating-vue.js" type="text/javascript" charset="utf-8"></script>
</html>
